<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>睿信培训</title>
  <link rel="stylesheet" href="../dist/lib/layui/css/layui.css">
  <style>
  body{
    font-family: "PingFang SC", "微软雅黑", "Microsoft YaHei",Helvetica,"Helvetica Neue",Tahoma,Arial,sans-serif;
  }
  .sign-header{
    width: 100%;
    height: auto;
    padding: 25px 40px;
    border-bottom: 1px solid #eeeeee;
    box-sizing: border-box;
  }
  .sign-header .logo img{
    max-height: 40px;
  }
  .sign-body{
    width: 100%;
    height: auto;
    padding: 100px 0 275px;
    box-sizing: border-box;
  }
  .sign-body .sign-main{
    padding: 0 142px 0 110px;
    box-sizing: border-box;
  }
  .sign-bd-left{
    width: 380px;
    float: left;
    box-sizing: border-box;
    margin-right: 168px;
  }
  .sign-bd-left .bg{
    width: 380px;
    height: 380px;
    background-repeat: no-repeat;
  }
  .sign-bd-right{
    width: 400px;
    float: left;
    padding: 22px 0 0;
  }
  .sign-tab-brief{
    margin: 0;
  }
  .sign-tab-brief .layui-tab-title{
    border: 0;
    padding: 0 6px;
  }
  .sign-tab-brief .layui-tab-title li{
    font-size: 24px;
    font-weight: bold;
    padding: 0;
    margin-right: 40px;
    color: #9ea1a8;
    min-width: auto;
  }
  .sign-tab-brief .layui-tab-title li:last-child{
    margin-right: 0;
  }
  .sign-tab-brief >.layui-tab-title .layui-this{
    color: #4079ff;
  }
  .sign-tab-brief >.layui-tab-title .layui-this:after{
    border-color: #4079ff;
  }
  .sign-tab-brief .layui-tab-content{
    padding: 36px 0 0;
  }
  .sign-tab-brief .layui-input{
    height: 42px;
    border-radius: 3px;
    font-size: 16px;
    border-color: #d8dce5;
  }
  .sign-tab-brief .layui-input::-webkit-input-placeholder{
    color: #cccccc;
  }
  .sign-tab-brief .layui-form-item{
    margin-bottom: 32px;
  }
  .sign-form-warn{
    padding: 22px 0 32px;
    position: relative;
  }
  .sign-form-warn .layui-form-checkbox{
    padding-left: 35px;
  }
  .sign-form-warn .layui-form-checkbox[lay-skin=primary] span{
    line-height: 24px;
  }
  .sign-form-warn .layui-form-checkbox[lay-skin=primary] i{
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-width: 2px;
    border-radius: 3px;
    border-color: #d8dce6;
  }
  .sign-form-warn .layui-form-checked[lay-skin=primary] i{
    background: none;
    color: #4079ff;
    font-weight: bold;
    font-size: 18px;
  }
  .sign-form-warn .link{
    position: absolute;
    top: 10px;
    right: 0;
    color: #605f70;
  }
  .sign-footer{
    width: 100%;
    height: auto;
    background-color: #edeff4;
    padding: 30px 0 40px;
  }
  .sign-footer .nav{
    text-align: center;
    margin-bottom: 90px;
  }
  .sign-footer .nav li{
    display: inline-block;
    font-size: 0;
    padding: 20px 42px;
  }
  .sign-footer .nav a{
    color: #605f70;
    font-size: 16px;
  }
  .sign-footer .nav a:hover{
    color: #2c2b33;
  }
  .sign-footer .copyright{
    color: #4c4c4c;
    font-size: 12px;
    text-align: center;
  }
  .sign-main{
    width: 1200px;
    height: auto;
    margin: 0 auto;
  }
  .sign-btn-normal{
    height: 42px;
    font-size: 16px;
    font-weight: bold;
    background-color: #4079ff;
    border-radius: 3px;
  }
  </style>
</head>
<body>
<section class="sign-header">
  <h1 class="logo">
    <img src="logo.png" alt="logo">
  </h1>
</section>
<section class="sign-body">
  <div class="sign-main layui-clear">
    <div class="sign-bd-left">
      <div class="bg" style="background-image: url(login_bg.jpg)"></div>
    </div>
    <div class="sign-bd-right">
      <div class="layui-tab layui-tab-brief sign-tab-brief">
        <ul class="layui-tab-title">
          <li class="layui-this">手机号码登录</li>
          <li>邮箱登录</li>
        </ul>
        <div class="layui-tab-content">
          <div class="layui-tab-item layui-show">
            <form class="layui-form">
              <div class="layui-form-item">
                <div class="layui-input-box">
                  <input type="text" name="userphone" lay-verify="userphone" placeholder="请输入手机号" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item" style="margin-bottom: 0;">
                <div class="layui-input-box">
                  <input type="password" name="userpwd" lay-verify="userpwd" placeholder="请输入密码" class="layui-input">
                </div>
              </div>
              <div class="sign-form-warn">
                <input type="checkbox" name="remember" title="7天自动登录" lay-skin="primary">
                <a href="#" class="link">忘记密码？</a>
              </div>
              <div class="layui-form-item">
                <button class="layui-btn sign-btn-normal layui-btn-fluid btn-submit" lay-submit lay-filter="phoneSignFormBtn">登录</button>
              </div>
            </form>
          </div>
          <!-- 不需要则隐藏 -->
          <div class="layui-tab-item">
            <form class="layui-form">
              <div class="layui-form-item">
                <div class="layui-input-box">
                  <input type="text" name="useremail" lay-verify="useremail" placeholder="请输入手机号" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item" style="margin-bottom: 0;">
                <div class="layui-input-box">
                  <input type="password" name="userpwd" lay-verify="userpwd" placeholder="请输入密码" class="layui-input">
                </div>
              </div>
              <div class="sign-form-warn">
                <input type="checkbox" name="remember" title="7天自动登录" lay-skin="primary">
                <a href="#" class="link">忘记密码？</a>
              </div>
              <div class="layui-form-item">
                <button class="layui-btn sign-btn-normal layui-btn-fluid btn-submit" lay-submit lay-filter="emailSignFormBtn">登录</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<footer class="sign-footer">
  <div class="sign-content">
    <ul class="nav">
      <li>
        <a href="#">关于我们</a>
      </li>
      <li>
        <a href="#">联系我们</a>
      </li>
      <li>
        <a href="#">帮助中心</a>
      </li>
      <li>
        <a href="#">订阅号</a>
      </li>
    </ul>
    <p class="copyright">京ICP证030173号-1   京网文【2013】0934-983号     ©2019Baidu</p>
  </div>
</footer>
<script src="../dist/lib/layui/layui.js"></script>
<script>
  layui.use(['element', 'form'], function(){
    var $ = layui.$,
        element = layui.element,
        form = layui.form;

    var emailReg = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    var phoneReg = /^1\d{10}$/;

    // 验证
    form.verify({
      userphone: function(value, item){
        if(!value){
          return '手机号不能为空';
        }
        if(!phoneReg.test(value)){
          return '请输入正确的手机号';
        }
      },
      useremail: function(value, item){
        if(!value){
          return '邮箱不能为空';
        }
        if(!emailReg.test(value)){
          return '请输入正确的邮箱';
        }
      },
      userpwd: [
        /^[\S]{6,12}$/,
        '密码必须6到12位，且不能出现空格'
      ]
    });

    // 手机号
    form.on('submit(phoneSignFormBtn)', function(data){
      $.post('', data.field, function(response){
        if (response.status == 1) {
          layer.msg(response.msg, function () {
            location.href=""
          });
        }else{
          layer.msg(response.msg);
        }
      });

      return false;
    });

    // 邮箱
    form.on('submit(emailSignFormBtn)', function(data){
      $.post('', data.field, function(response){
        if (response.status == 1) {
          layer.msg(response.msg, function () {
            location.href=""
          });
        }else{
          layer.msg(response.msg);
        }
      });

      return false;
    });

  });
</script>
</body>
</html>